//首页
<template>
  <div id="home">
    <!-- 轮播 -->
    <el-carousel :autoplay='autoplay' trigger="click" height='500px' :interval='2000' id="carousel-wrapper">
      <el-carousel-item v-for="(item,index) in imgsData" :key="index" id="carousel-item" height='500px'>
        <div v-if="index==0" class="carousel-content-wrapper">
          <img src="./05m-imeag.png" class="email-icon"/>
          <div>互联网模式下</div>
          <div style="margin-left:5px;">品牌实现<span style="color:yellow;">逆风翻盘</span></div>
          <div style="font-size:15px;margin-left:5px">保有对互联网的敬畏之心，浪尖飞口猪也能飞上天</div>
          <go ></go>
        </div>
        <img :src="item" class='carousel-img' :key='index' >
      </el-carousel-item>
    </el-carousel>
    <!-- 图二 -->
    <div class="graer-wrapper" :style="{backgroundImage:'url(' + grierImg + ')'}" >
      <div class="service-wrapper" >
        <div class="service-title" >服务项目</div>
        <div class="service-title-img"><img src="./line.png"></div>
        <div class="service-title-text">闻道有先，术业有专志</div>
      </div>
      <div class="service-tp-content-wrapper">
        <div class="service-tp-content" v-for='(item,index) in businessData' :key='index'>
          <img :src="item.imgUrl" class="service-tp-content-img">
          <div class="service-tp-content-title">{{item.title}}</div>
          <div class="service-tp-content-text">
            <span>{{item.text}}</span>
            <span class="special-text">{{item.specialText}}</span>
            <span v-if='item.text2'>{{item.text2}}</span>
          </div>
        </div> 
      </div>
      <go class="ttt"></go>
    </div>
    <!-- 成功案例 -->
    <div id="success">
      <div id="success-title">
          <div class="success-title-01">成功案例</div>
          <img src="" class="success-title-02">
          <div class="success-title-03">白马过隙，定格精彩</div>
          <div class="success-title-04">
            <span>全部</span>
            <span>网站建设</span>
            <span>小程序开发</span>
            <span>APP开发</span>
          </div>
      </div>
      <div class="success-wrapper">
        <div class="success-content" v-for='(item, index) in successData' :key="index">
          <img :src="item.imgUrl" class="success-img"/>
          <div>{{item.title}}</div>
          <div class="des-text">{{item.des}}</div>
          <div class="success-line"></div>
          <div class="success-detail" :style="{backgroundImage:'url('+imgArrow+')'}">查看详情</div>
        </div>
      </div>
    </div>
  <div class="pen-wrappern"> 
    <img src="./4pen.jpg" class="pingpai"/>
    <div class="pen01">
          <div class="pen-title1">连接线上拓展和品牌传播</div>
          <div class="pen-title2">挖掘品牌效果+包装视觉效果+官网上线/营销服务</div>
    </div> 
    <div class="pen-text-wrapper" >
        <div class="pen-01">
              <!-- <img src="./lanse.jpg" id="pen-img"/> -->
              <div class="pen-tetle">服务</div>
              <div class="pen-item1">寻求更多合作机会，您可以点击这里，开始探索</div>
        </div>
        <div class="pen-02">
              <!-- <img src="./huise.jpg" id="pen-img"/> -->
              <div class="pen-tetle">品牌</div>
              <div class="pen-item1">品牌是我们的终生守护，在消费者的角度，实现品牌价值</div>
          </div>
          <div class="pen-03">
              <!-- <img src="./huise.jpg" id="pen-img"/> -->
              <div class="pen-tetle">我们</div>
              <div class="pen-item1">在互联网告诉发展的今天，我们也在日渐成长</div>
        </div>
    </div>
  </div> 
  <div class="thin-wrapper">
      <div class="thin-text">
        <div class="thin-title">那些“事”</div>
        <div class="article">
          <img src="./line.png" />
          <img src=""/>去看文章
        </div>
        <div>共享价值，与尔成长</div>
      </div>
        <div class="thin-img-wrapper">
            <!-- <div class="thin-img" v-for='(item, index) in thinData' :key="index">
               <img :src="item.thinimg" class="thin-img"/>
               <div>{{text1}}</div>
               <div>{{text2}}</div>
               <img src="item.line" />
            </div> -->
            <div class="thin-img1">
                <img src="./thin02 (1).png" class="thin-img"/>
                <div class="text1">文本1</div>
                <div class="text2">文本2</div>
                <div class="thin-line"></div>
                <div class="thin-detail" :style="{backgroundImage:'url('+imgArrow+')'}">查看详情</div>
            </div>
            <div class="thin-img2">
                <img src="./thin02 (2).png" class="thin-img"/>
                <div class="text1">文本1</div>
                <div class="text2">文本2</div>
                <div class="thin-line"></div>
                <div class="thin-detail" :style="{backgroundImage:'url('+imgArrow+')'}">查看详情</div>
            </div>
            <div class="thin-img3">
                <img src="./thin03.png" class="thin-img"/>
                <div class="text1">文本1</div>
                <div class="text2">文本2</div>
                <div class="thin-line"></div>
                <div class="thin-detail" :style="{backgroundImage:'url('+imgArrow+')'}">查看详情</div>
            </div>
        </div>
  </div>
    <div id="people-wrapper">
      <div class="people-text"> 
        <div class="people-title" >那些“人”</div>
        <div class="article">
            <img src="./line.png"  class="p-line"/><img src=""/>去看客户
          </div>
        <div class="people-text2">确认过眼神，都是对的人</div>
      </div> 
      <div class="people-img">
        <img src="./people (1).png" class="p-img"/>
        <img src="./people (2).png" class="p-img"/>
        <img src="./people (3).png" class="p-img"/>
        <img src="./people (4).png" class="p-img"/>
        <img src="./people (5).png" class="p-img"/>
        <img src="./people (6).png" class="p-img"/>
        <img src="./people (7).png" class="p-img"/>
        <img src="./people (8).png" class="p-img"/>
        <img src="./people (9).png" class="p-img"/>
         <img src="./people (10).png" class="p-img"/>
        <img src="./people (15).png" class="p-img"/>
        <img src="./people (16).png" class="p-img"/>
        <img src="./people (17).png" class="p-img"/>
        <img src="./people (18).png" class="p-img"/>
      </div>
    </div>
    <v-nav></v-nav>
    <!-- 聯係我們 -->
    <contact></contact>
  </div>
</template>

<script>
// <div><img src="/src/views/home/09nifen.jpg"/></div>
import src from "./home.css"
import projectItem from '../project-item/projectItem'
import fast from "./01fast.png"
import grier from "./02grier.jpg"
import pingpai from "./4pen.jpg"

import imgAnli01 from "./anli01.jpg"
import imgArrow from "./arrow.png"
import grierImg from "./02grier.jpg"
import nav from "../v-nav/botton-nav.vue"
import go from '@/components/go'
import contact from '@/components/contact'
export default {
  name: "home",
  data(){
    return {
      businessData:[
        {
          imgUrl:'',
          title:'標題',
          text:'',
          specialText:''
        },
        {
          imgUrl:'',
          title:'標題',
          text:'',
          text2:'',
          specialText:''
        }
      ],
      imgsData:[fast,fast],
      autoplay:false,
      imgArrow:imgArrow,
      grierImg:grierImg,
      successData:[
        {
          imgUrl:imgAnli01,
          title:'国美',
          des:'软件开发'
        },
        {
          imgUrl:imgAnli01,
          title:'国美',
          des:'软件开发'
        },
        {
          imgUrl:imgAnli01,
          title:'国美',
          des:'软件开发'
        },
        {
          imgUrl:imgAnli01,
          title:'国美',
          des:'软件开发'
        }
      ],
      // thinData:[
      //   {
      //     thinimg:thinimg01,
      //     text1:'上海盟载带您了解做个网站多少钱？',
      //     text2:"上海盟载网络专业从事网站建设、小程序开发以及SEO和SEM业务。小编近日为您带来的分享是做一个网站到底需要多少钱？这应该是让所有甲方老板关系的.....",
      //     line:thinLine
      //   },
      //    {
      //     thinimg:thinimg02,
      //     text1:'上海盟载带您了解做个网站多少钱？',
      //     text2:"上海盟载网络专业从事网站建设、小程序开发以及SEO和SEM业务。小编近日为您带来的分享是做一个网站到底需要多少钱？这应该是让所有甲方老板关系的.....",
      //     line:thinLine
      //   },
      //    {
      //     thinimg:thinimg03,
      //     text1:'上海盟载带您了解做个网站多少钱？',
      //     text2:"上海盟载网络专业从事网站建设、小程序开发以及SEO和SEM业务。小编近日为您带来的分享是做一个网站到底需要多少钱？这应该是让所有甲方老板关系的.....",
      //     line:thinLine
      //   }
      // ]
    }
  },
  methods:{
  },
  components: {
    projectItem,
    vNav:nav,
    go,contact
  }
};
</script>

